import React, { Component } from 'react'
import { browserHistory } from 'react-router'
import Helmet from 'react-helmet'
import cookie from 'react-cookie'
import { Link } from 'react-router'
import { isEmpty, isUndefined } from 'lodash/fp'
var FormData = require('form-data')
import { message } from 'antd'

import s from '../assets/Space.scss'
import portrait from '../assets/portrait.png'
import header from '../assets/header.jpg'

class Space extends Component {

  constructor (props) {
    super(props)
    this.state = {
      headImg: ''
    }
  }

  componentWillMount () {

  }

  componentWillReceiveProps (nextProps) {
    const { space, upuserHead } = nextProps
    const { fileUpload, userhead } = space
    const { upload, isFetching } = fileUpload
    const { header } = userhead
    if (!isUndefined(fileUpload) && !isUndefined(upload) && !isUndefined(upload.err_msg) && isFetching !== this.props.space.fileUpload.isFetching) {
      let arr = JSON.parse(upload.err_msg)
      this.setState({
        headImg: arr.filename.url
      })
      upuserHead(nextProps.user.signed.result.userdata.u_id, arr.filename.url)
      message.success('头像更新成功！')
    }
    if (!isUndefined(userhead) && !isUndefined(header) && !isUndefined(header.result) && header.result.message === 'success' && userhead.isFetching !== this.props.space.userhead.header.isFetching) {
    }
  }

  openFile () {
    this.refs.myFile.click()
  }

  upload() {
    const { fileUpload } = this.props
    let myFile = this.refs.myFile.files[0]
    var form = new FormData()
    form.append('filename', myFile)
    fileUpload(form)
  }

  render () {
    const historicalRecords = [{
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '0'
    }, {
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '1'
    }, {
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '2'
    }, {
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '3'
    }, {
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '4'
    }, {
      'title': '25岁睡了18岁的自己又生下自己，标题都看不懂？剧情更烧脑！',
      'date': '今天 8:41',
      'id': '5'
    }]
    const { space, user } = this.props
    const { signed } = user
    return (
      <div className={s.spaceContain}>
        <header>
          <img src={header} className={s.back} />
          { !isUndefined(user) && !isUndefined(signed) && !isUndefined(signed.result) && !isUndefined(signed.result.userdata) &&
            <nav>
              { this.state.headImg !== '' ?
                <img src={this.state.headImg} onClick={(e) => this.openFile(e)} />
                :
                <img src={signed.result.userdata.u_headimg} onClick={(e) => this.openFile(e)} />
              }
              <input type='file' id='fileId' ref='myFile' accept='image/png,image/image/jpeg,image/image/jpg' value='' onChange={(e) => this.upload(e)} />
              <p>{signed.result.userdata.u_name}</p>
            </nav>
          }
        </header>
        <section>
          <p>历史记录</p>
          <div className={s.historicalRecords}>
            { historicalRecords.map((item, i) =>
              <Link to={ '/forumList/' + item.id } className={s.item} key={i}>
                <img src={header} />
                <div className={s.items}>
                  <aside style={{ webkitBoxOrient: 'vertical' }}>{item.title}</aside>
                  <span>{item.date}</span>
                </div>
              </Link>
            )}
          </div>
        </section>
      </div>
    )
  }
}

Space.propTypes = {

}

Space.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default Space
